"use client";

import { memo } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import ListHeader from "../../../../../../components/list-header";
import { shallowEqualApp, useAppSelector } from "@/store/hooks";
import { getImgOnSize } from "@/utils/format";
interface IProps {
  children?: ReactNode;
}

interface Singer {
  id: number;
  picUrl: string;
  name: string;
  alias: string;
}

const ResidentSingers: FC<IProps> = (props) => {
  const { singers } = useAppSelector(
    (state: any) => ({
      singers: state.recommended.residentSingers,
    }),
    shallowEqualApp
  );
  return (
    <div className={styles.residentSingersWrapper}>
      <ListHeader name={"入驻歌手"} moreLink={"/discover/singers"}></ListHeader>
      <div className={styles.list}>
        {singers.map((singer: Singer) => {
          return (
            <a href="#/discover/singer" key={singer.id}>
              <div className={styles.img}>
                <img src={getImgOnSize(singer.picUrl, 62)} />
              </div>
              <div className={styles.info}>
                <div className={styles.infoName}>{singer.name}</div>
                <div className={styles.detail}>{singer.alias}</div>
              </div>
            </a>
          );
        })}
      </div>
      <div className={styles.button}>
        <a href="" className="sprite_button">
          <span className="sprite_button">申请成为网易音乐人</span>
        </a>
      </div>
    </div>
  );
};

export default memo(ResidentSingers);
